<template>
    <div class = 'movie'>
        <router-view></router-view>
        <div class = 'wrap' v-if = '!isPosClick && showbottom'>
            <div class = 'pos'>
                <div @click = 'posClick' ref = 'myref'>
                    {{cityRes}}
                    <i class = 'iconfont icon-xiajiantou'></i>
                </div>
            </div>
            <my-wrap v-bind:movieTop='movieTop' v-bind:cityId='cityid' v-bind:cityName='cityRes'></my-wrap>
            <div class = 'search'>
                <div>
                    <router-link :to='{path : "/movie/mSearch" ,query:{cityId : cityid,cityName:cityRes}}'>
                       <i class = 'iconfont icon-sousuo'></i>
                    </router-link>
                </div>
            </div>
        </div>
        <div class = 'hidden'>
            <div>
                <div class = 'pos'>
                    <div @click = 'posClick'>
                        {{cityRes}}
                        <i class = 'iconfont icon-xiajiantou'></i>
                    </div>
                </div>
                <i>电影</i>
                <div class = 'search'>
                    <div>
                        <router-link :to='{path : "/movie/mSearch" ,query:{cityId : cityid,cityName:cityRes}}'>
                            <i class = 'iconfont icon-sousuo'></i>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <div class = 'tab' v-if = '!isPosClick && showbottom'>
            <div class = 'hot'>
                <div class = 'text' :class = "{'active' : ischecked}" v-on:click = 'checkHot'>
                     正在热映
                </div>
            </div>
            <div class = 'toOnline'>
                <div class = 'text' :class = "{'active' : !ischecked}" v-on:click = 'checkOn'>
                    即将上映
                </div>
            </div>
        </div>
        <div v-if = '!isPosClick && showbottom'>
            <movie-list v-bind:option='ischecked' v-bind:citydata='[cityid,cityRes]'></movie-list>
        </div>
        <div v-if = 'isPosClick && showbottom'>
                    <city v-bind:isclick = 'isPosClick' v-bind:mycity = 'cityRes' v-on:child-click='myClick'></city>
                </div>
        <!-- <transition
                v-bind:duration="{enter:400,leave:300}"
                enter-active-class="animate__animated  animate__bounceInUp"
                enter-to-class="animate__animated  animate__bounceInUp"
                >
                
            </transition> -->
        <my-bottom v-bind:moviecity = 'cityRes' v-bind:mcityId = 'cityid' v-bind:flag = 0 v-if = 'showbottom'></my-bottom>
    </div>
</template>
<script>
import movieList from '@/components/movieList.vue'
import myWrap from '@/components/myWrap.vue'
import city from '@/components/city.vue'
import myBottom from '@/components/myBottom.vue';
export default {
    name : 'movie',
    data(){
        return {
            ischecked : true,
            isPosClick : false,
            movieData : 111,
            movieTop : [],
            cityRes : '广州',
            cityid : 20,
            showbottom : true,
        }
    },
    methods:{
        checkHot(){
            this.ischecked = true;
        },
        checkOn(){
            this.ischecked = false;
        },
        posClick(){
            this.isPosClick = true;
        },
        myClick(res){
            this.isPosClick = res.Cclick;
            // console.log(res.cityResult);
            this.cityRes = res.cityResult;
            this.cityid = res.cityId;
            // console.log(this.cityid)
             window.onscroll = function() {
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                let hiddenBox = document.querySelector('.hidden');
                let tabBox = document.querySelector('.tab');
                // console.log(scrollTop)
                if(hiddenBox != undefined)  hiddenBox.style.opacity = scrollTop/150;
                if(tabBox != undefined){
                    if(scrollTop >= 150){
                        // console.log(tabBox.classList)
                        tabBox.classList.add('fix')
                    }else{
                        tabBox.classList.remove('fix')
                    }
                }
             }
        },
        render(){
            
        },
    },
    created(){
        this.cityRes = localStorage.getItem('cityName') || this.$route.query.name || this.$route.query.cityname || "广州";
        this.cityid = localStorage.getItem('cityId') || this.$route.query.id || this.$route.query.cityid || 20;
        window.onscroll = function() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let hiddenBox = document.querySelector('.hidden');
            let tabBox = document.querySelector('.tab');
            // console.log(scrollTop)
            if(hiddenBox != undefined)  hiddenBox.style.opacity = scrollTop/150;
            if(tabBox != undefined){
                if(scrollTop >= 150){
                    // console.log(tabBox.classList)
                    tabBox.classList.add('fix')
                }else{
                    tabBox.classList.remove('fix')
                }
            }
        }
        
    },
    components:{
        movieList,
        myWrap,
        city,
        myBottom,
    },
    beforeRouteUpdate(to, from, next) {
        // console.log(to)
        if(to.name == 'mSearch'){
            this.showbottom = false;
        }else if(to.name == 'Movie'){
            this.showbottom = true;
            this.cityRes = to.query.name;
            this.cityid = to.query.id;
        }
        next();
    },
}
</script>
<style lang = 'scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.movie{
    margin-bottom : 60px;
    .wrap{
        width : 100%;
        height : 200px;
        position : relative;
        .pos{
            position : absolute;
            top : 10px;
            left : 10px;
            z-index : 50;
            width : 70px;
            height : 30px;
            text-align : center;
            line-height : 30px;
            border-radius : 30px;
            color : #e5e6e7;
            font-size : 8px;
            background-color : rgba(0,0,0,0.2); 
            div{
                width : 50px;
                margin : 0 auto;
                padding : 0 3px;
                box-sizing : border-box;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            i{
                position : absolute;
                top : 0;
                right : 0px;
            }
        }
        .search{
            position : absolute;
            top : 10px;
            right : 10px;
            z-index : 50;
            width : 30px;
            height : 20px;
            text-align : center;
            line-height : 20px;
            i{
                color : #e5e6e7;
            }
        }
    }
    .hidden{
        width : 100%;
        height : 50px;
        line-height: 50px;
        position : fixed;
        top : 0;
        background-color : white;
        opacity:0;
        >div{
            position:relative;
            text-align:center;
            .pos{
                position : absolute;
                top : 10px;
                left : 10px;
                z-index : 50;
                width : 60px;
                height : 30px;
                text-align : center;
                line-height : 30px;
                font-size : 8px;
                div{
                    width : 50px;
                    margin : 0 auto;
                    padding : 0 3px;
                    box-sizing : border-box;
                    overflow:hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                i{
                     position : absolute;
                    top : 0;
                    right : 0px;
                }
            }
            >i{
                color : #374140;
            }
            .search{
                position : absolute;
                top : 10px;
                right : 10px;
                z-index : 50;
                width : 30px;
                height : 20px;
                text-align : center;
                line-height : 20px;
                i{
                    color : skyblue;
                }
            }
        }
    }
    .tab{
            display:flex;
            height:60px;
            background-color : white;
            div{
                flex-basis : 50%;
                .text{
                    width : 70px;
                    height : 100%;
                    line-height : 60px;
                    margin:  auto;
                    font-size : 16px;
                    text-align : center;
                }
                .text.active{
                    box-sizing : border-box;
                    border-bottom : 3px solid #FF9900;
                    color : #FF9900;
                }
            }
    }
    .tab.fix{
        width : 100%;
        position:fixed;
        top:50px;
        border-top:1px solid #f4f4f4;
    }
}

</style>